<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AdminLTE 3 | Vue3 | PushMenu</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="css/adminlte.min.css">
</head>
<body>
<div id="app">

  <!-- 顶部页头 -->
  <nav ref="header" class="main-header navbar navbar-expand navbar-white navbar-light" style="min-height:3.5rem;">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" @click.prevent="toggleMenu" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
      </li>
    </ul>
  </nav>

  <!-- 左侧菜单 -->
  <aside class="main-sidebar sidebar-dark-primary elevation-4">
    <p style="color:white;">SideBar</p>
  </aside>

  <!-- 工作区 -->
  <div class="content-wrapper">
    <div class="container-fluid">
		<div class="row">
			<div class="col-12">
				<table class="table">
					<thead>
					  <tr>
						<th scope="col">#</th>
						<th scope="col">Name</th>
						<th scope="col" width="50%">Color</th>
					  </tr>
					</thead>
					<tbody>
					  <tr>
						<th scope="row">1</th>
						<td>云门</td>
						<td style="background-color: #9AC9D9;">#9AC9D9</td>
					  </tr>
					  <tr>
						<th scope="row">2</th>
						<td>西子</td>
						<td style="background-color: #81BAC1;">#81BAC1</td>
					  </tr>
					  <tr>
						<th scope="row">3</th>
						<td>正青</td>
						<td style="background-color: #6BA4AB;">#6BA4AB</td>
					  </tr>
					  <tr>
						<th scope="row">4</th>
						<td>法翠</td>
						<td style="background-color: #078890;">#078890</td>
					  </tr>
					  <tr>
						<th scope="row">5</th>
						<td>白青</td>
						<td style="background-color: #97B1C0;">#97B1C0</td>
					  </tr>
					  <tr>
						<th scope="row">6</th>
						<td style="background-color: #5e90b8;">竹月(#5e90b8)</td>
						<td style="background-color: #7F9AAB;">#7F9AAB</td>
					  </tr>
					  <tr>
						<th scope="row">7</th>
						<td>空青</td>
						<td style="background-color: #648E86;">#648E86</td>
					  </tr>
					  <tr>
						<th scope="row">8</th>
						<td>井天</td>
						<td style="background-color: #A0C6C7;">#A0C6C7</td>
					  </tr>
					  <tr>
						<th scope="row">9</th>
						<td>扁青</td>
						<td style="background-color: #4F9092;">#4F9092</td>
					  </tr>
					  <tr>
						<th scope="row">10</th>
						<td>濯色</td>
						<td style="background-color: #1D6865;">#1D6865</td>
					  </tr>
					  <tr>
						<th scope="row">11</th>
						<td>退红</td>
						<td style="background-color: #87BAB3;">#87BAB3</td>
					  </tr>
					  <tr>
						<th scope="row">12</th>
						<td>二绿</td>
						<td style="background-color: #5A9E99;">#5A9E99</td>
					  </tr>
					  <tr>
						<th scope="row">13</th>
						<td>铜青</td>
						<td style="background-color: #2E8A82;">#2E8A82</td>
					  </tr>
					  <tr>
						<th scope="row">14</th>
						<td>石绿</td>
						<td style="background-color: #176660;">#176660</td>
					  </tr>
					  <tr>
						<th scope="row">15</th>
						<td>秋蓝</td>
						<td style="background-color: #7B8F9A;">#7B8F9A</td>
					  </tr>
					  <tr>
						<th scope="row">16</th>
						<td>霁蓝</td>
						<td style="background-color: #3B4551;">#3B4551</td>
					  </tr>
					  <tr>
						<th scope="row">17</th>
						<td>濑见</td>
						<td style="background-color: #161D29;">#161D29</td>
					  </tr>
					  <tr>
						<th scope="row">18</th>
						<td style="color:#161B85;">软翠</td>
						<td style="background-color: rgb(0 109 135);">#006d87</td>
					  </tr>
					  <tr>
						<th scope="row">19</th>
						<td>柔蓝</td>
						<td style="background-color: #056794;">#056794</td>
					  </tr>
					  <tr>
						<th scope="row">20</th>
						<td>碧城</td>
						<td style="background-color: #0D4E77;">#0D4E77</td>
					  </tr>
					  <tr>
						<th scope="row">21</th>
						<td>蓝采和</td>
						<td style="background-color: #00426C;">#00426C</td>
					  </tr>
					  <tr>
						<th scope="row">22</th>
						<td>帝释青</td>
						<td style="background-color: #01335E;">#01335E</td>
					  </tr>
					  <tr>
						<th scope="row">23</th>
						<td>孔雀蓝</td>
						<td style="background-color: #4990BC;">#4990BC</td>
					  </tr>
					  <tr>
						<th scope="row">24</th>
						<td>吐绶蓝</td>
						<td style="background-color: #3B7DA5;">#3B7DA5</td>
					  </tr>
					  <tr>
						<th scope="row">25</th>
						<td>鱼师青</td>
						<td style="background-color: #2A7B8E;">#2A7B8E</td>
					  </tr>
					  <tr>
						<th scope="row">26</th>
						<td>太师青</td>
						<td style="background-color: #527486;">#527486</td>
					  </tr>
					  <tr>
						<th scope="row">27</th>
						<td>育阳染</td>
						<td style="background-color: #57646D;">#57646D</td>
					  </tr>
					  <tr>
						<th scope="row">28</th>
						<td>天水碧</td>
						<td style="background-color: #58A1AD;">#58A1AD</td>
					  </tr>
					</tbody>
				  </table>
			</div>
		</div>
	</div>
  </div>

  <!-- 底部页脚 -->
  <footer class="main-footer" style="min-height:3.5rem;">
    Footer
  </footer>
  
  <!-- 遮盖层 -->
  <teleport to="body"><div id="sidebar-overlay" ref="overlay"></div></teleport>
</div>
<!-- ./wrapper -->
<script src="https://unpkg.com/vue@next"></script>
<script type="text/javascript">
	if (typeof Vue == 'undefined') {
		var script= document.createElement("script");
		script.type = "text/javascript";
		script.src="js/vue.global.3.2.26.js";
		//script.setAttribute('sync', true);
		document.body.appendChild(script);
	}
</script>
<script type="text/javascript">
	window.onload = () => {
	  Vue.createApp({
		setup(props) {
			const header = Vue.ref(null);
			const overlay = Vue.ref(null);

			Vue.onBeforeMount(() => {
				// 阻止动画效果
				document.body.classList.add("hold-transition")
				// 最小化sidebar
				document.body.classList.add("sidebar-mini")
			})

			Vue.onMounted(()=> {
				//console.log('onMounted', header.value, overlay.value)
				header.value.parentNode.classList.add("wrapper")
				document.body.classList.remove("hold-transition")

				windowed()

				if (windowWidh < autoCollapseSize) {
					collapseMenu()
				}

				document.addEventListener("click", function(event) {
				  //console.log("overlay click", overlay, event)
				  // 只有点击overlay层时才关闭菜单（手机上该层才会出现）
				  if (event.target !== overlay.value) {
					return
				  }
				  if (windowWidh < autoCollapseSize) {
					collapseMenu()
				  }
				});
				window.addEventListener("resize", windowed)
			})

			// PushMenu
			let autoCollapseSize = 992
			let windowWidh = null

			const toggleMenu = () => {
			  if (!document.body.classList.contains("sidebar-collapse")) {
				collapseMenu()
			  } else {
				openMenu()
			  }
			}

			const windowed = () => {
				windowWidh = window.innerWidth || document.documentElement.clientWidth;
			}

			const collapseMenu = () => {
				document.body.classList.add("sidebar-collapse");
				//document.body.classList.add("sidebar-is-opening");
				document.body.classList.remove("sidebar-open");
				if (windowWidh < autoCollapseSize) {
					document.body.classList.add("sidebar-closed");
				}
			}

			const openMenu = () => {
				//console.log(document.body.classList)
				document.body.classList.remove("sidebar-collapse");
				document.body.classList.add("sidebar-open");
				if (windowWidh < autoCollapseSize) {
					document.body.classList.remove("sidebar-closed");
				}
			} 

			return {
				header,
				overlay,
				toggleMenu,
			}
		}
	  }).mount('#app');
	}
</script>
<style>
	td[style] {
		color: #fff;
	}
</style>
</body>
</html>
